<template>
  <div class="order-model">
    <div class="order-list">
      <div class="search-box">
        <el-row>
          <div style="overflow: hidden;">
              <div class="labelName lf">商品名称：</div>
              <el-input @keyup.enter.native="searchData()" style="width: 150px;" class="elInput lf" v-model="goods_name"></el-input>
              <div class="labelName lf">物流单号：</div>
              <el-input @keyup.enter.native="searchData()" style="width: 150px;" class="elInput lf" v-model="deliver_no"></el-input>
              <div class="labelName lf">订单号：</div>
              <el-input @keyup.enter.native="searchData()" class="elInput lf" v-model="order_sn"></el-input>
              <div class="labelName lf">下单时间：</div>
              <el-date-picker @keyup.enter.native="searchData()" class="lf elDate" style="margin-right:10px;" value-format="timestamp" v-model="start_time" type="date" placeholder="选择日期"></el-date-picker>
              <div class="labelName lf">至：</div>
              <el-date-picker @keyup.enter.native="searchData()" value-format="timestamp" class="elDate lf" v-model="end_time" type="date" placeholder="选择日期"></el-date-picker>
            </div>
          </el-row>
          <div class="search-box-left">
            <el-row style="margin-top: 10px;display:inline-block;width:75%">
              <div class="labelName lf">订单来源：</div>
              <div class="cascader lf">
                  <el-select v-model="source" placeholder="请选择">
                    <el-option
                      v-for="item in sourceArr"
                      :key="item.gs_id"
                      :label="item.gs_name"
                      :value="item.gs_name">
                    </el-option>
                  </el-select>
                </div>
                <div class="labelName lf">订单类型：</div>
                <div class="cascader lf">
                  <el-select v-model="type" placeholder="请选择">
                    <el-option
                      v-for="item in typeArr"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
            </el-row>
            <div class="search-box-right" style="display:inline-block">
              <el-button style="margin-right:10px;float: right" type="primary" @click="searchData">查询</el-button>
              <a :href="downloadlocation" class="exportOrder" style="margin-right:10px;float: right">导出订单</a>
            </div>
          </div>
      </div>
      <ul class="tab-nav">
        <li class="tab-nav-item" v-for="(item,index) in tabList" :key="item.id" @click="switchTab(index)">{{item.text}}</li>
        <!-- <li class="tab-nav-item" @click="switchUser(0)">玩购星球</li> -->
        <div class="line" ref='line'></div>
      </ul>
      <div class="wgl" v-show='currentType == 1'>
        <div class="table-box">
          <el-table :data="orderList">
            <el-table-column label="商品" width="200px;">
              <template slot-scope="scope">
                <div class="goodsDetail clearfix">
                  <div class="priviewImg lf">
                    <img :src="scope.row.goods[0].goods_image" alt="">
                  </div>
                  <div class="goodsMsg lf">
                    {{scope.row.goods[0].goods_name}}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="昵称" width="80px">
              <template slot-scope="scope">
                <div>
                  {{scope.row.nickname}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="成本价/零售价" width="80px">
              <template slot-scope="scope">
                <div class="price">
                  ￥{{scope.row.goods[0].supply_price}}
                </div>
                <div class="price">
                  ￥{{scope.row.goods[0].sell_price}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="玩购价" width="50px">
              <template slot-scope="scope">
                <div class="price">
                  {{scope.row.goods[0].play_price}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="星星价" width="50px">
              <template slot-scope="scope">
                <div class="price">
                  {{scope.row.goods[0].star_price}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="订单类型" width="80px;">
              <template slot-scope="scope">
                <div class="price" v-if="scope.row.type == 0">换购</div>
                <div class="price" v-if="scope.row.type == 1">抓中</div>
                <div class="price" v-if="scope.row.type == 2">兑换</div>
                <div class="price" v-if="scope.row.type == 3">拼团</div>
                <div class="price" v-if="scope.row.type == 4">弹球游戏</div>
                <div class="price" v-if="scope.row.type == 5">组词游戏</div>
                <div class="price" v-if="scope.row.type == 6">抽奖</div>
              </template>
            </el-table-column>
            <el-table-column label="收货信息" width="200px;">
              <template slot-scope="scope">
                <div class="detail">收货人：{{ scope.row.consignee ? scope.row.consignee : "无" }} </div>
                <div class="detail">联系电话：{{scope.row.phone_mob ? scope.row.phone_mob : "无" }}</div>
                <div class="detail">收获地址：{{scope.row.region_name ? scope.row.region_name : "" }} {{scope.row.address ? scope.row.address : "无" }}</div>
              </template>
            </el-table-column>
            <el-table-column label="订单号" width="100px">
              <template slot-scope="scope">
                <div class="detail">
                  {{scope.row.order_sn}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="时间" width="80px">
              <template slot-scope="scope">
                <div class="detail">
                  {{scope.row.add_time}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="实付金额" prop="pay_amount" width="80px">
              <template slot-scope="scope">
                <div class="price">
                  ￥{{scope.row.pay_amount}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="实付星星" width="50px">
              <template slot-scope="scope">
                <div class="price">{{scope.row.stars}}</div>
              </template>
            </el-table-column>
            <el-table-column label="来源" width="50px">
              <template slot-scope="scope">
                <div class="detail">
                  {{scope.row.goods[0].gs_name}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="group_name" width="50px">
              <template slot-scope="scope">
                <div class="price">
                  {{scope.row.status===10?'待付款':scope.row.status===20?'已付款':scope.row.status===30?'已发货':scope.row.status===11?'已兑换':scope.row.status===40?'已完成':scope.row.status===12?'已过期':'已取消'}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150px" v-if="currentOrderType !== 11">
                <template slot-scope="scope">
                  <div class="control">
                    <a class="btn" @click="linkToDetail(currentOrderType, scope.row.order_id)">详情</a>
                    <span v-if="scope.row.status===20" class="spacer"></span>
                    <a class="btn" v-if="scope.row.status===20" @click="handleClickdelivery(scope.row)">发货</a>
                    <span class="spacer" v-if="scope.row.status!==0"></span>
                    <a class="btn" @click="doCloseOrder(scope.row.order_id)" v-if="scope.row.status!==0">关闭</a>
                  </div>
                </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="pageSizeArray"
              :page-size="10"
              layout="sizes, prev, pager, next"
              :total="total_count">
            </el-pagination>
        </div>
      </div>
      <div class="wgxq" v-show='currentType == 2'>
         <div class="table-box">
            <el-table :data="orderList">
              <el-table-column label="商品" width="200px;">
                <template slot-scope="scope">
                  <div class="goodsDetail clearfix">
                    <div class="priviewImg lf">
                      <img :src="scope.row.goods[0].goods_image" alt="">
                    </div>
                    <div class="goodsMsg lf">
                      {{scope.row.goods[0].goods_name}}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="昵称" width="80px">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.nickname}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="成本价/零售价" width="80px">
                <template slot-scope="scope">
                  <div class="price">
                    ￥{{scope.row.goods[0].supply_price}}
                  </div>
                  <div class="price">
                    ￥{{scope.row.goods[0].sell_price}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="订单类型" width="80px;">
                <template slot-scope="scope">
                  <div class="price" v-if="scope.row.type == 0">换购</div>
                  <div class="price" v-if="scope.row.type == 1">抓中</div>
                  <div class="price" v-if="scope.row.type == 2">兑换</div>
                  <div class="price" v-if="scope.row.type == 3">拼团</div>
                  <div class="price" v-if="scope.row.type == 4">弹球游戏</div>
                  <div class="price" v-if="scope.row.type == 5">组词游戏</div>
                  <div class="price" v-if="scope.row.type == 6">抽奖</div>
                  <div class="price" v-if="scope.row.type == 8">娃娃活动</div>

                </template>
              </el-table-column>
              <el-table-column label="收货信息" width="200px;">
                <template slot-scope="scope">
                  <div class="detail">收货人：{{ scope.row.consignee ? scope.row.consignee : "无" }} </div>
                  <div class="detail">联系电话：{{scope.row.phone_mob ? scope.row.phone_mob : "无" }}</div>
                  <div class="detail">收获地址：{{scope.row.region_name ? scope.row.region_name : "" }} {{scope.row.address ? scope.row.address : "无" }}</div>
                </template>
              </el-table-column>
              <el-table-column label="订单号" width="100px">
                <template slot-scope="scope">
                  <div class="detail">
                    {{scope.row.order_sn}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="时间" width="80px">
                <template slot-scope="scope">
                  <div class="detail">
                    {{scope.row.add_time}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="实付金额" prop="pay_amount" width="80px">
                <template slot-scope="scope">
                  <div class="price">
                    ￥{{scope.row.pay_amount}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="实付星星" width="50px">
                <template slot-scope="scope">
                  <div class="price">{{scope.row.stars}}</div>
                </template>
              </el-table-column>
              <el-table-column label="来源" width="50px">
                <template slot-scope="scope">
                  <div class="detail"> {{scope.row.goods[0].gs_name}}
                    <!-- 玩购星球 -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="状态" prop="group_name" width="50px">
                <template slot-scope="scope">
                  <div class="price">
                    {{scope.row.status===10?'待付款':scope.row.status===20?'已付款':scope.row.status===30?'已发货':scope.row.status===11?'已兑换':scope.row.status===40?'已完成':scope.row.status===12?'已过期':'已取消'}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150px" v-if="currentOrderType !== 11">
                  <template slot-scope="scope">
                    <div class="control">
                      <a class="btn" @click="linkToDetail(currentOrderType, scope.row.order_id,'wgxq')">详情</a>
                      <span v-if="scope.row.status===20" class="spacer"></span>
                      <a class="btn" v-if="scope.row.status===20" @click="handleClickdelivery(scope.row)">发货</a>
                      <span class="spacer" v-if="scope.row.status!==0"></span>
                      <!-- <a class="btn" @click="doCloseOrder(scope.row.order_id,'wgxq')" v-if="scope.row.status!==0">关闭</a> -->
                    </div>
                  </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage"
                  :page-sizes="pageSizeArray"
                  :page-size="10"
                  layout="sizes, prev, pager, next"
                  :total="total_count">
              </el-pagination>
            </div>
         </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="1000px"
      title="发货"
      :show-close="false">
      <div class="delivery-container">
        <div class="currentId">订单号：{{currentId}}</div>
        <div class="delivery-box">
          <el-table :data="currentGoodsList" border>
            <el-table-column label="商品名称" prop="goods_name"></el-table-column>
            <el-table-column label="规格" prop="sku_attr"></el-table-column>
            <el-table-column label="数量" prop="quantity"></el-table-column>
          </el-table>
        </div>
        <div class="detail-item clearfix">
          <div class="labelName lf">发货地址：</div>
          <div class="detail-content lf" v-text="currentAddress"></div>
        </div>
        <div class="detail-item clearfix">
          <div class="labelName lf">物流公司：</div>
          <el-select style="margin-right:20px;" class="lf" v-model="shipping_com" placeholder="请选择">
            <el-option
              v-for="item in expressCompany"
              :key="item.rec_id"
              :label="item.circulated_name"
              :value="item.rec_id">
            </el-option>
          </el-select>
          <div class="labelName lf">物流单号：</div>
          <el-input class="elInput lf" v-model="shipping_no"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="tips lf">提示：请确认以上商品全部打包齐全再进行发货</div>
        <el-button class="elButton" type="primary" @click="delivery()">确 定</el-button>
        <el-button class="elButton" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { server } from "../public/js/globalVariables.js";
export default {
  name: "order",
  watch: {
    $route(to, from) {
      this.currentPage = 1;
      // this.currentOrderType 是代表订单的状态
      this.currentOrderType = parseInt(to.params.type);
      console.log(this.currentOrderType);
      switch (this.currentType) {
        case 1:
          this.getOrderListByType(this.currentOrderType);
          break;
        case 2:
          this.getOrderListByType(this.currentOrderType, "wgxq");
          break;
      }
    }
  },
  methods: {
    //确认发货
    delivery() {
      this.$confirm("是否确定发货", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let reqArr = [
            ["shipping_com", "number", "请选择物流公司"],
            ["shipping_no", "string", "请填写物流单号"]
          ];
          let res = this.$requiredFun(reqArr, this);
          if (res.state) {
            let formData = new FormData();
            formData.append("order_id", this.currentOrderId);
            formData.append("shipping_com", this.shipping_com);
            formData.append("shipping_no", this.shipping_no);
            this.currentType == 2
              ? formData.append("backend_type", 2)
              : formData.append("backend_type", 0);

            this.$http(
              "/wgl_admin/index.php?app=order&act=delivery",
              "post",
              {},
              {},
              formData,
              success => {
                console.log(success);
                this.$message.success("操作成功");
                //更新订单状态
                this.currentType == 1
                  ? this.getOrderListByType(this.currentOrderType)
                  : this.getOrderListByType(this.currentOrderType, "wgxq");
                this.dialogVisible = false;
              },
              error => {
                this.$message.error(error.state.msg);
              }
            );
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
    //点击发货弹出模态框
    handleClickdelivery(target) {
      this.currentOrderId = target.order_id;
      this.currentId = target.order_sn;
      this.currentGoodsList = target.goods;
      this.currentAddress = target.address;
      this.dialogVisible = true;
    },
    //通过状态获取订单列表
    getOrderListByType(status, platform) {
      let params = {
        per_page: this.pageSize,
        current_page: this.currentPage,
        status: status,
        goods_name: this.goods_name,
        deliver_no: this.deliver_no,
        order_sn: this.order_sn,
        type: this.type,
        start_time: this.start_time
          ? parseInt(this.start_time / 1000).toString()
          : "",
        end_time: this.end_time
          ? parseInt(this.end_time / 1000).toString()
          : "",
        source: this.source
      };
      // 这里做平台判断
      params.backend_type = platform == "wgxq" ? 2 : 0;
      this.$http(
        "/wgl_admin/index.php?app=order&act=lists",
        "GET",
        {},
        params,
        {},
        success => {
          this.orderList = success.data.list;
          this.total_count = success.data.total_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //分页 内容切换
    handleCurrentChange(data) {
      this.currentType == 1
        ? this.getOrderListByType(this.currentOrderType)
        : this.getOrderListByType(this.currentOrderType, "wgxq");
    },

    //分页 每页条数切换
    handleSizeChange(data) {
      this.pageSize = data;
      this.currentType == 1
        ? this.getOrderListByType(this.currentOrderType)
        : this.getOrderListByType(this.currentOrderType, "wgxq");
    },

    //查看商品详情内容
    linkToDetail(orderType, targetId, platform) {
      let params = {
        orderType: orderType,
        orderId: targetId
      };
      if (platform == "wgxq") {
        params.activityType = "wgxq";
      }
      this.$router.push({
        name: "orderDetail",
        params: params
      });
    },

    //关闭订单
    doCloseOrder(order_id, platform) {
      let formData = new FormData();
      formData.append("order_id", order_id);
      platform == "wgxq"
        ? formData.append("backend_type", 2)
        : formData.append("backend_type", 0);
      this.$http(
        "/wgl_admin/index.php?app=order&act=close",
        "post",
        {},
        {},
        formData,
        success => {
          this.$message.success("操作成功");
          this.currentOrderType = parseInt(this.$route.params.type);
          if (platform == "wgxq") {
            this.getOrderListByType(this.currentOrderType, "wgxq");
          } else {
            this.getOrderListByType(this.currentOrderType);
          }
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //查询订单列表
    searchData(platform) {
      console.log(this.start_time);
      console.log(this.end_time);

      if (this.start_time > this.end_time) {
        this.$message.error("开始日期大于结束日期");
        return;
      }
      if (
        this.start_time &&
        this.end_time &&
        this.start_time === this.end_time
      ) {
        this.end_time = this.start_time + 86400000 - 1;
      }
      this.currentPage = 1;
      this.currentType == 1
        ? this.getOrderListByType(this.currentOrderType)
        : this.getOrderListByType(this.currentOrderType, "wgxq");
    },

    //获取物流地址
    getlogistics() {
      this.$http(
        "/wgl_admin/index.php?app=order&act=logistics",
        "get",
        {},
        {},
        {},
        success => {
          console.log(success);
          this.expressCompany = success.data;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //订单来源
    getOrderSource() {
      this.$http(
        "/wgl_admin/index.php?app=goods_source&act=get_goods_source",
        "get",
        {},
        {},
        {},
        success => {
          let tempArr = [{ gs_id: 0, gs_name: "全部" }];
          let tempArr2 = tempArr.concat(success.data);
          tempArr2.push({ gs_id: tempArr2.length, gs_name: "其他" });
          this.sourceArr = tempArr2;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    // 切换导航
    switchTab(index) {
      let fIndex = index;
      this.currentType = index == 1 ? 2 : 1;
      this.$refs.line.style.left = fIndex * 50 + "%";
      this.$refs.line.style.transition = `all 0.3s linear`;
      this.goods_name = "";
      this.deliver_no = "";
      this.order_sn = "";
      this.start_time = "";
      this.end_time = "";
      this.source = "";
      switch (this.currentType) {
        case 1:
          this.typeArr = this.typeArr1;
          this.getOrderListByType(this.currentOrderType);
          break;
        case 2:
          this.typeArr = this.typeArr2;
          this.getOrderListByType(this.currentOrderType, "wgxq");
          break;
      }
    }
  },
  computed: {
    downloadlocation() {
      let platform = this.currentType == 1 ? 0 : 2;
      let url =
        server +
        "/wgl_admin/index.php?app=order&act=export" +
        "&goods_name=" +
        this.goods_name +
        "&order_sn=" +
        this.order_sn +
        "&status=" +
        this.currentOrderType +
        "&deliver_no=" +
        this.deliver_no +
        "&start_time=" +
        this.start_time +
        "&end_time=" +
        this.end_time +
        "&admin_token=" +
        sessionStorage.getItem("loginMsg") +
        "&backend_type=" +
        platform;
      return url;
    }
  },
  components: {},
  created() {
    this.currentOrderType = parseInt(this.$route.params.type);
    this.getOrderListByType(this.currentOrderType);
    this.getlogistics();
    //获取订单来源配置
    this.getOrderSource();
  },
  mounted() {},
  data() {
    return {
      shipping_com: "",
      shipping_no: "",
      expressCompany: [],
      currentAddress: "", //当前的发货地址
      currentGoodsList: [],
      dialogVisible: false,
      currentOrderType: -1,
      currentId: "",
      currentPage: 1, //当前页码
      pageSize: 10, //每页条数
      pageSizeArray: PageSizeArray, //每页条数数组
      orderList: [],
      total_count: 0, //订单总数
      goodsArr: [], //选中的商品数组
      start_time: "",
      end_time: "",
      wglOrder: false,
      currentType: 1,
      tabList: [
        {
          id: 0,
          text: "玩购说"
        },
        {
          id: 1,
          text: "玩购星球"
        }
      ],
      typeArr: [
        {
          value: -1,
          text: "全部"
        },
        {
          value: 0,
          text: "换购"
        },
        {
          value: 1,
          text: "抓中"
        },
        {
          value: 2,
          text: "兑换"
        },
        {
          value: 3,
          text: "拼团"
        }
      ],
      typeArr1: [
        {
          value: -1,
          text: "全部"
        },
        {
          value: 0,
          text: "换购"
        },
        {
          value: 1,
          text: "抓中"
        },
        {
          value: 2,
          text: "兑换"
        },
        {
          value: 3,
          text: "拼团"
        }
      ],
      typeArr2: [
        {
          value: -1,
          text: "全部"
        },
        {
          value: 0,
          text: "换购"
        },
        {
          value: 8,
          text: "娃娃活动"
        },
        {
          value: 2,
          text: "兑换"
        },
        {
          value: 3,
          text: "拼团"
        }
      ],
      type: -1,
      deliver_no: "", //物流单号
      order_sn: "",
      goods_name: "",
      sourceArr: [],
      source: ""
    };
  }
};
</script>
<style lang="scss" scoped>
.order-model {
  width: 100%;
  position: relative;
  padding-left: 118px;
  .order-list {
    padding: 30px 36px 30px 50px;
  }
  .btns {
    min-width: 1080px;
    padding-top: 30px;
    margin-bottom: 38px;
  }
  .table-box {
    // max-width: 1466px;
    width: 100%;
    margin-top: 40px;
  }
  .pagination {
    max-width: 1466px;
    width: 100%;
    text-align: right;
    margin-top: 20px;
  }
}

.search-box {
  border: 1px solid #e6e8f4;
  min-width: 1446px;
  height: 130px;
  padding: 25px 30px;
  width: 100%;
  .elInput {
    width: 120px;
    font-size: 12px;
    color: #333;
    margin-right: 20px;
  }
  .elDate {
    font-size: 12px;
    color: #333;
    width: 200px;
    margin-right: 20px;
  }
  .labelName {
    height: 40px;
    line-height: 40px;
    color: #333;
    font-size: 14px;
  }
  .cascader {
    width: 150px;
    margin-right: 20px;
  }
}

.control {
  .btn {
    color: #6499f5;
    font-size: 14px;
    cursor: pointer;
    position: relative;
  }
  .spacer:after {
    content: "|";
    display: inline;
    color: #b7bdc9;
  }
}
.price {
  font-size: 12px;
  color: #e17474;
}
.detail {
  color: #999;
  font-size: 12px;
}
.goodsDetail {
  .priviewImg {
    margin-right: 10px;
    > img {
      display: block;
      width: 80px;
      height: 80px;
    }
  }
  .goodsMsg {
    color: #333;
    font-size: 12px;
    max-width: 120px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
}
.dialog-footer {
  display: block;
  height: 100%;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid #e6e8f4;
  .elButton {
    width: 150px;
  }
  .tips {
    height: 30px;
    line-height: 30px;
    color: #e17474;
    font-size: 12px;
  }
}
.delivery-box {
  width: 900px;
  margin: 48px auto 0;
}
.detail-item {
  margin-left: 32px;
  height: 40px;
  line-height: 40px;
  color: #999;
  font-size: 12px;
  margin-bottom: 10px;
  .elInput {
    width: 240px;
  }
}
.detail-content {
  height: 40px;
  line-height: 40px;
  color: #999;
  font-size: 12px;
}
.exportOrder {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  background: #e6a23c;
  color: #fff;
}
.tab-nav {
  position: relative;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 10px 0;
  &-item {
    display: inline-block;
    width: 100px;
    text-align: left;
    &:hover {
      cursor: pointer;
    }
  }
  .line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: #3f87f5;
  }
}
</style>
